<template>
  <view>
    <PublicPage pageName="帮卖详情" class="qpp-export-detail">
      <!-- list列表 -->
      <ScrollList
          ref="scrollView"
          isFixed
          noTop
          @interrupt="interrupt"
          @scrolltolower="scrolltolower"
      >
        <template slot="content">
          <!-- 帮卖信息 -->
          <view class="userInfo">
            <image :src="helpUser.communityLogo||'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" class="avatar" @click.stop="_goHomepage"/>
            <view class="userContent">
              <view class="nickname" @click.stop="_goHomepage">{{helpUser.communityName||''}}</view>
              <view class="headRemarkContent">
                <text class="headRemark">备注：{{helpUser.headRemark||''}}</text>
                <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/help-edit-icon.png" class="editIcon" @click.stop="_onOpenModal" />
              </view>
              <view class="sourceContent">来源：{{helpUser.source}}</view>
            </view>
            <view v-if="!isSelf" class="messageContent" @click.stop="_onChat">
              <view class="iconfont icon-comment_fill"></view>
            </view>
          </view>
          <!-- 订单、粉丝等数据展示 -->
          <view class="dataContent">
            <view class="row">
              <view class="dataItem flex-col justify-center">
                <view class="itemNum">{{helpUser.helpSellOrderAmount||0}}</view>
                <view class="itemText">帮卖金额(元)</view>
              </view>
              <view class="dataItem flex-col justify-center">
                <view class="itemNum">{{helpUser.helpSellOrderCount||0}}</view>
                <view class="itemText">帮卖订单数(单)</view>
              </view>
              <!-- @click.stop="_onGetGainCommission" -->
              <view class="dataItem flex-col justify-center">
                <view class="itemNum">{{helpUser.helpSellCommission||0}}</view>
                <view class="itemText">
                  帮卖佣金(元)
                  <!-- <text v-if="helpUser.helpSellCommission>0">></text>-->
                </view>
              </view>
            </view>
            <view class="row">
              <view class="dataItem flex-col justify-center">
                <view class="itemNum">{{helpUser.memberCount||0}}</view>
                <view class="itemText">成员数量</view>
              </view>
              <view class="dataItem flex-col justify-center">
                <view class="itemNum">{{helpUser.beHelpSellDay||0}}</view>
                <view class="itemText">已成为帮卖(天)</view>
              </view>
            </view>
          </view>
          <!-- 按钮组 -->
          <view class="groupButton">
            <view
                v-for="item in groupButtons"
                :key="item.value"
                class="buttonItem"
                @click.stop="_onGroupBtn(item.value)"
            >
              <image :src="item.image" class="image-icon" />
              <view class="label-txt">{{item.label}}</view>
            </view>
          </view>
          <!-- 帮卖分割盒子 -->
          <view class="box">帮卖的团</view>
          <DynamicCard v-if="list.length||listLoading" :list="list" type="4" :loading="listLoading" @groupBtn="_dynamicGroupBtn" />
          <!-- 缺省状态 -->
          <view v-else :style="{height: 'calc(100vh - 383px - ' + emptyHeight + 'px)'}">
            <DefaultPage type="2" tips2="暂时没有帮卖团哦～" />
          </view>
        </template>
      </ScrollList>
    </PublicPage>
    <!-- 编辑昵称弹框 -->
    <u-modal
          ref="uModal"
          v-model="dlModal"
          title="设置备注名"
          show-cancel-button
          async-close
          cancelColor="#969799"
          confirmColor="#E44435"
          @confirm="_onSubmitEdit"
      >
        <view class="slot-content">
          <view class="input_msg">
            <input
                v-model.trim="remarkName"
                maxlength="8"
                placeholder="请输入备注，最多8个字符。"
                class="input_box"
                placeholder-class="place_holder"
            />
          </view>
        </view>
      </u-modal>
    <!-- 取消用户帮卖权限 -->
    <u-popup v-model="cancelHelp" mode="center" border-radius="14" length="85%">
        <view class="flex-col inventory-section_1">
          <text class="inventory-title">是否取消帮卖权限？</text>
          <text class="inventory-text">取消帮卖权限后，TA将不可再帮卖你的团购，请谨慎操作</text>
        </view>
        <view class="flex-row inventory-button">
          <view class="flex-col inventory-text-wrapper" @click.stop="_onRelieve">
            <text>解除关系</text>
          </view>
          <view class="inventory-section_3"> </view>
          <view class="flex-col items-center inventory-text-wrapper_1" @click.stop="cancelHelp = false">
            <text>我再想想</text>
          </view>
        </view>
      </u-popup>
    <!-- 已获取佣金明细 -->
<!--    <u-popup v-model="dlCommission" mode="center" border-radius="14" length="85%">-->
<!--        <view class="flex-col gain_detail-section_1">-->
<!--          <view class="flex-col gain_detail-group">-->
<!--            <text class="gain-commission">-->
<!--              已获得佣金：<text class="text">¥{{helpUser.helpSellCommission || 0}}</text>-->
<!--            </text>-->
<!--            &lt;!&ndash; <u-icon name="close" size="48" color="#dcdee0" class="close-gain-commission" @click="gainCommissionDetail = false"></u-icon> &ndash;&gt;-->
<!--          </view>-->
<!--          <view class="flex-col gain_detail-group_1">-->
<!--            <view class="gain_detail-text_2">-->
<!--              <text class="em">帮卖佣金：</text>-->
<!--              <text class="text">¥{{gainCommission.helpSellCommission || 0}}</text>-->
<!--            </view>-->
<!--            &lt;!&ndash; <div class="gain_detail-text_2"><em>达人专属佣金：</em><span>¥532.32</span></div>-->
<!--            <div class="gain_detail-text_2"><em>推荐帮卖佣金：</em><span>¥532.32</span></div> &ndash;&gt;-->
<!--            <view class="gain_detail-text_2 gain_detail-text_ma">-->
<!--              <text>推荐帮卖人数：</text>-->
<!--              <text class="text">{{gainCommission.recommendCount || 0}}</text>-->
<!--            </view>-->
<!--          </view>-->
<!--          <button class="flex-col items-center gain_detail-know" @click="dlCommission=false" hover-class="none">知道了</button>-->
<!--        </view>-->
<!--      </u-popup>-->
    <!-- toast提示 -->
    <!-- 动态分享、邀请帮卖 -->
    <SharePublicPage
        v-if="dlShare"
        :shareVideoData="shareObject"
        @cancelShareFn="(flag) => dlShare = false"
        @posterFn="_posterFn"
    />
    <!-- 保存相册海报分享 -->
    <SharePoster
        v-if="dlPoster"
        :shareVideoData="shareObject"
        @cancelSharePosterFn="() => dlPoster = false"
    />
    <!-- 开团成功海报 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="_shareSuccess" />
    <PublishPopup v-if="dlGroup" :sharePublishData="shareObject"  @closeSharePublishFn="(flag)=>dlGroup=flag" />
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import SharePublicPage from '@/components/shareModal/sharePublicPage.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import helpSellGroups from '@/api/helpSellGroups.js'
import shareMixin from '@/components/dynamicCard/shareMixin'

const groupButtons = [
  {
    value: 1,
    label: '取消帮卖权限',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/cancle_help_icon.png'
  },
  {
    value: 2,
    label: '设置分组',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/setting_group_icon.png'
  },
  {
    value: 3,
    label: '设置专属佣金',
    image: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/exclusive_commission_icon.png'
  }
]

export default {
  name: 'exportDetail',
  mixins: [shareMixin],
  components: {
    PublicPage,
    ScrollList,
    DynamicCard,
    DefaultPage,
    SharePublicPage,
    SharePoster
  },
  computed: {
    // 空列表盒子高度
    emptyHeight() {
      const { navHeight, navBottom } = this.$store.state.globalData
      return navHeight + navBottom
    }
  },
  data() {
    return {
      // 路由携带参数--headAccountId
      routeData: {},
      // 帮卖用户信息
      helpUser: {
        beHelpSellDay: 0,// 已成为帮卖天数
        memberCount: 0,// 粉丝数量
        headAccountId: '',// 帮卖团长id
        communityLogo: '',// 帮卖团长头像url
        headMobile: '', // 帮卖团长手机号码
        communityName: '', // 帮卖团长用户昵称
        headRemark: '', // 供货团长对帮卖团长的备注
        helpSellCommission: 0, //已获取帮卖佣金
        helpSellOrderAmount: 0, // 帮卖金额
        helpSellOrderCount: 0, // 帮卖订单数
        source: '', // [推荐人昵称]推荐
      },
      groupButtons: groupButtons, // 按钮组
      list: [],
      page: {
        currentPage: 1,
        pageSize: 10
      },
      isSelf: false, // 当前是否是自己
      listMore: true, // 当前列表是否还有更多
      listLoading: true, // 加载骨架图
      dlModal: false, // 修改用户昵称弹框变量
      remarkName: '', // 用户昵称
      cancelHelp: false, // 取消用户帮卖权限弹窗变量
      // dlCommission: false, // 帮卖佣金弹窗变量
      // gainCommission: {
      //   helpSellCommission: 0,
      //   recommendCount: 0,
      // }, // 佣金明细对象
      timeout: null,
    }
  },
  onLoad(options) {
    this.routeData = options
    // 当前是否是用户自己
    if (this.$store.state.imUserInfo.imId === options.headAccountId) {
      this.isSelf = true
    }
    this.getHelpUser(options.headAccountId)
    this.getDynamics(options.headAccountId)
  },
  onShow() {
    // 列表需要刷新数据
    if (this.getIsRefreshType()) {
      this.setIsRefreshType(false)
      this.listMore = true
      this.page.currentPage = 1
      this.getDynamics(this.routeData.headAccountId)
      this.$nextTick(() => {
        this.$refs.scrollView && this.$refs.scrollView.goToScroll(0)
      })
    }
  },
  onHide() {
    // 清除定时器标识
    if (this.timeout) clearTimeout(this.timeout)
  },
  methods: {
    // 获取帮卖详情
    async getHelpUser(id) {
      const res = await helpSellGroups.getHeadInfo({ headAccountId: id })
      if (res.code === 200) {
        this.helpUser = res.data
      }
    },
    // 获取动态列表数据
    getDynamics(id) {
      helpSellGroups.getHelpSellDynamic({
        ...this.page,
        headAccountId: id,
      }).then(res => {
        if (res.code === 200) {
          if (this.page.currentPage === 1) {
            this.list = res.data.records
          } else {
            this.list = this.list.concat(res.data.records)
          }
          if ((this.page.currentPage * this.page.pageSize) !== this.list.length) {
            // 无更多数据标识
            this.listMore = false
            if(this.page.currentPage === 1){this.$refs.scrollView.loadFinish(3,0)} // 无更多数据
          }
        }
      })
      // 隐藏骨架图标识
      this.timeout = setTimeout(() => {
        this.listLoading = false
      }, 750)
    },
    // 跳转IM聊天
    _onChat() {
      // 在展示已过滤当前帮卖团长是用户自己的情况了
      this.navigateTo({url: '/pagesB/message/messageDetails?id=' + this.routeData.headAccountId})
    },
    // 弹出修改昵称对话框
    _onOpenModal() {
      const { headRemark, communityName } = this.helpUser
      this.remarkName = headRemark || communityName
      this.dlModal = true
    },
    // 提交昵称修改
    _onSubmitEdit() {
      if (!this.remarkName) {
        // 清除异步关闭的loading状态
        this.$refs.uModal.clearLoading()
        return uni.showToast({
          title: '请输入备注!',
          icon: 'none',
          duration: 1000
        })
      }
      helpSellGroups.updateHeadRemark({
        headAccountId: this.routeData.headAccountId,
        headRemark: this.remarkName
      }).then(res => {
        if (res.code === 200) {
          if (this.helpUser.headRemark) {
            this.helpUser.headRemark = this.remarkName
          } else {
            this.helpUser.communityName = this.remarkName
          }
          this.dlModal = false
          this.remarkName = ''
        }
      })
    },
    // 按钮组--其中对应的type看groupButton
    _onGroupBtn(type) {
      switch (type) {
        case 1:
          this.cancelHelp = true
          break
        case 2:
        case 3:
          this.$refs.uToast.show({
            title: '功能待开放',
            type: 'warning',
          })
          break
      }
    },
    // 解除帮卖关系
    _onRelieve() {
      helpSellGroups.cancelHead({
        headAccountId: this.routeData.headAccountId
      }).then(res => {
        if (res.code === 200) {
          this.cancelHelp = false
          this.setIsRefreshType(true)
          // this.navigateTo({ url: `/pagesA/helpSellGroups/helpSell?type=0`})
          this.navigateBack({ delta: 1})
        }
      })
    },
    // 获取佣金明细
    // _onGetGainCommission() {
    //   if (this.helpUser.helpSellCommission <= 0) return
    //   helpSellGroups.getCommissionDetails({ headAccountId: this.routeData.headAccountId }).then(res => {
    //     if (res.code === 200) {
    //       this.gainCommission = res.data
    //       this.dlCommission = true
    //     }
    //   })
    // },
    // 下拉刷新
    interrupt() {
      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.listMore = true
        this.page.currentPage = 1
        this.getDynamics(this.routeData.headAccountId)
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 500);
    },
    // 上拉加载更多
    scrolltolower() {
      ++this.page.currentPage
      this.getDynamics(this.routeData.headAccountId)
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成
    },
    // 跳转社群主页
    _goHomepage() {
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${this.helpUser.headAccountId}`})
    }
  }
}
</script>
<style lang="scss" scoped>
.qpp-export-detail {
  width: 100%;
  .userInfo {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 196rpx;
    padding: 24rpx 32rpx;
    border-top: 2rpx solid #EBEDF0;
    background-color: #ffffff;
    .avatar {
      display: block;
      width: 112rpx;
      height: 112rpx;
      border-radius: 50%;
    }
    .userContent {
      flex: 1;
      margin-left: 24rpx;
    }
    .nickname {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: $n8Color;
      @include bov(1);
    }
    .headRemarkContent {
      display: flex;
      align-items: center;
      margin: 16rpx 0;
    }
    .headRemark {
      line-height: 40rpx;
      font-size: 28rpx;
      color: $n6Color;
      @include bov(1);
    }
    .editIcon {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
    .sourceContent {
      font-size: 24rpx;
      line-height: 32rpx;
      color: $n6Color;
    }
    .icon-comment_fill {
      font-size: 40rpx;
      color: #C8C9CC;
    }
    .messageContent {
      width: 64rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
    }
  }
  .groupButton {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 168rpx;
    padding: 0 24rpx;
    border-top: 4rpx solid #F7F8FA;
    background-color: #ffffff;
    .buttonItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 33.3333%;
    }
    .image-icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 16rpx;
    }
    .label-txt {
      font-size: 24rpx;
      line-height: 32rpx;
      color: $n8Color;
    }
  }
  .dataContent {
    box-sizing: border-box;
    width: 100%;
    height: 320rpx;
    padding: 0 32rpx;
    background-color: #ffffff;
    .row {
      display: flex;
      width: 100%;
      height: 160rpx;
    }
    .dataItem {
      width: 33.3333%;
      height: 100%;
    }
    .itemNum {
      width: 100%;
      margin-bottom: 8rpx;
      line-height: 48rpx;
      font-size: 36rpx;
      text-align: center;
      font-weight: 500;
      color: $n8Color;
    }
    .itemText {
      width: 100%;
      line-height: 32rpx;
      font-size: 24rpx;
      text-align: center;
      color: $n6Color;
    }
  }
  .box {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 96rpx;
    margin: 24rpx 0 0;
    padding: 24rpx 32rpx;
    color: #000000;
    line-height: 48rpx;
    font-size: 32rpx;
    font-weight: 500;
    background-color: #ffffff;
  }
  .inventory-text {
    text-align: center;
    color: #E44435;
  }
  // 已获取佣金明细
  .gain_detail-section_1 {
    padding: 28rpx 28rpx 40rpx 32rpx;
    background-color: rgb(255, 255, 255);
    border-radius: 16rpx;
  }
  .gain_detail-group {
    color: rgb(0, 0, 0);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
    white-space: nowrap;
    height: 64rpx;
  }
  .gain-commission {
    margin: 14rpx 0 32rpx;
    font-size: 36rpx;
    line-height: 48rpx;
    color: #323233;
    .text {
      color: #E44435;
    }
  }
  .gain_detail-group_1 {
    margin-top: 32rpx;
    color: rgb(0, 0, 0);
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: nowrap;
  }
  .gain_detail-text_2 {
    width: 100%;
    margin-bottom: 24rpx;
    font-size: 32rpx;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.gain_detail-text_ma {
      margin-bottom: 0rpx;
    }
    .em {
      color: #323233;
    }
    .text {
      color: #E44435;
    }
  }
  .gain_detail-know {
    width: 100%;
    margin-right: 4rpx;
    margin-top: 40rpx;
    padding: 28rpx 0 24rpx;
    color: rgb(255, 255, 255);
    font-size: 36rpx;
    line-height: 44rpx;
    background-color: rgb(228, 68, 53);
    border-radius: 40rpx;
  }
}
</style>